import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:leader_help/page/home/key_point/widgets/custom_search.dart';
import 'package:leader_help/utils/colors_util.dart';
import 'package:leader_help/utils/component/component.dart';
import 'package:leader_help/value/topcolors.dart';

import 'key_point_logic.dart';
import 'key_point_macroscopic/key_point_big_view.dart';
import 'key_point_microcosmic/key_point_small_view.dart';

class KeyPointPage extends StatefulWidget {
  const KeyPointPage({Key? key}) : super(key: key);

  @override
  _KeyPointPageState createState() => _KeyPointPageState();
}

class _KeyPointPageState extends State<KeyPointPage> {
  final logic = Get.put(KeyPointLogic());
  final state = Get.find<KeyPointLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: detailAppBar(context, title: "我的重点", actions: [
        Container(
          margin: EdgeInsets.only(right: 10.r),
          child: InkWell(
            child: Row(
              children: [
                const Icon(
                  Icons.add,
                  size: 18,
                  color: Colors.white,
                ),
                SizedBox(
                  width: 2.r,
                ),
                const Text(
                  "添加重点",
                  style: TextStyle(color: Colors.white, fontSize: 15),
                ),
              ],
            ),
            onTap: () {
              logic.actionAddPoint();
            },
          ),
        ),
      ]),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.only(top: 5.r, bottom: 5.r),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(2.r),
            ),
            child: const CustomSearch(
              hintLabel: "请输入搜索关键词",
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    margin: EdgeInsets.only(
                        left: 8.r, top: 15.r, right: 8.r, bottom: 15.r),
                    padding: EdgeInsets.only(bottom: 15.r),
                    width: Get.width,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(5.r),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          padding: EdgeInsets.only(
                              left: 10.r, top: 10.r, bottom: 8.r),
                          child: const Text(
                            "“万人助万企”",
                            style: TextStyle(
                                color: Color(0xffD81E06),
                                fontSize: 15,
                                fontWeight: FontWeight.w600),
                          ),
                        ),
                        Divider(
                          color: TopColors.gray_line,
                          height: 1,
                        ),
                        Row(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(
                                left: 10.r,
                              ),
                              padding: EdgeInsets.only(
                                  left: 10.r,
                                  top: 10.r,
                                  right: 10.r,
                                  bottom: 10.r),
                              width: 50.r,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(5.r),
                              ),
                              child: const Text(
                                "最新动态",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 15),
                              ),
                            ),
                            Expanded(
                              child: ListView.builder(
                                padding: EdgeInsets.symmetric(vertical: 20.r),
                                shrinkWrap:
                                    true, //解决无线高度问题 解决SingleChildScrollView 和listview冲突问题 ListView.builder
                                itemBuilder: (BuildContext context, int index) {
                                  return pointListItem(state.news[index]);
                                },
                                // 禁止滑动
                                physics: const NeverScrollableScrollPhysics(),
                                //item固定高度
                                // itemExtent: ScreenUtil().setHeight(30),
                                // 滑动方向
                                scrollDirection: Axis.vertical,
                                itemCount: state.news.length,
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              padding: EdgeInsets.only(left: 10.r, right: 10.r),
                              width: 50.r,
                              child: const Icon(
                                Icons.arrow_forward_ios,
                                size: 18,
                              ),
                            ),
                          ],
                        ),
                        Divider(
                          color: TopColors.gray_line,
                          height: 1,
                        ),
                        Row(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(
                                left: 10.r,
                              ),
                              padding: EdgeInsets.only(
                                  left: 10.r,
                                  top: 10.r,
                                  right: 10.r,
                                  bottom: 10.r),
                              width: 50.r,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(5.r),
                              ),
                              child: const Text(
                                "宏观问题",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 15),
                              ),
                            ),
                            Expanded(
                              child: GestureDetector(
                                child: ListView.builder(
                                  padding: EdgeInsets.symmetric(vertical: 20.r),
                                  shrinkWrap: true, //解决无线高度问题 解决SingleChildScrollView 和listview冲突问题 ListView.builder
                                  itemBuilder: (BuildContext context, int index) {
                                    return pointListItem1(
                                        state.macroscopic[index]);
                                  },
                                  // 禁止滑动
                                  physics: const NeverScrollableScrollPhysics(),
                                  //item固定高度
                                  // itemExtent: ScreenUtil().setHeight(30),
                                  // 滑动方向
                                  scrollDirection: Axis.vertical,
                                  itemCount: state.news.length,
                                ),
                                onTap: () {
                                  Get.to(const KeyPointBigPage());
                                },
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              padding: EdgeInsets.only(left: 10.r, right: 10.r),
                              width: 50.r,
                              child: const Icon(
                                Icons.arrow_forward_ios,
                                size: 18,
                              ),
                            ),
                          ],
                        ),
                        Divider(
                          color: TopColors.gray_line,
                          height: 1,
                        ),
                        Row(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(
                                left: 10.r,
                              ),
                              padding: EdgeInsets.only(
                                  left: 10.r,
                                  top: 10.r,
                                  right: 10.r,
                                  bottom: 10.r),
                              width: 50.r,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(5.r),
                              ),
                              child: const Text(
                                "微观问题",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 15),
                              ),
                            ),
                            Expanded(
                              child: GestureDetector(
                                child: pointListItem2(state.microcosmic, true),
                                onTap: () {
                                  Get.to(const KeyPointSmallPage());
                                },
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              padding: EdgeInsets.only(left: 10.r, right: 10.r),
                              width: 50.r,
                              child: const Icon(
                                Icons.arrow_forward_ios,
                                size: 18,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                        left: 8.r, top: 15.r, right: 8.r, bottom: 15.r),
                    padding: EdgeInsets.only(bottom: 15.r),
                    width: Get.width,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(5.r),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          padding: EdgeInsets.only(
                              left: 10.r, top: 10.r, bottom: 8.r),
                          child: const Text(
                            "“黄河流域生态保护与高质量发展”",
                            style: TextStyle(
                                color: Color(0xffD81E06),
                                fontSize: 15,
                                fontWeight: FontWeight.w600),
                          ),
                        ),
                        Divider(
                          color: TopColors.gray_line,
                          height: 1,
                        ),
                        Row(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(
                                left: 10.r,
                              ),
                              padding: EdgeInsets.only(
                                  left: 10.r,
                                  top: 10.r,
                                  right: 10.r,
                                  bottom: 10.r),
                              width: 50.r,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(5.r),
                              ),
                              child: const Text(
                                "最新动态",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 15),
                              ),
                            ),
                            Expanded(
                              child: ListView.builder(
                                padding: EdgeInsets.symmetric(vertical: 20.r),
                                shrinkWrap:
                                    true, //解决无线高度问题 解决SingleChildScrollView 和listview冲突问题 ListView.builder
                                itemBuilder: (BuildContext context, int index) {
                                  return pointListItem(state.news1[index]);
                                },
                                // 禁止滑动
                                physics: const NeverScrollableScrollPhysics(),
                                //item固定高度
                                // itemExtent: ScreenUtil().setHeight(30),
                                // 滑动方向
                                scrollDirection: Axis.vertical,
                                itemCount: state.news.length,
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              padding: EdgeInsets.only(left: 10.r, right: 10.r),
                              width: 50.r,
                              child: const Icon(
                                Icons.arrow_forward_ios,
                                size: 18,
                              ),
                            ),
                          ],
                        ),
                        Divider(
                          color: TopColors.gray_line,
                          height: 1,
                        ),
                        Row(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(
                                left: 10.r,
                              ),
                              padding: EdgeInsets.only(
                                  left: 10.r,
                                  top: 10.r,
                                  right: 10.r,
                                  bottom: 10.r),
                              width: 50.r,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(5.r),
                              ),
                              child: const Text(
                                "宏观问题",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 15),
                              ),
                            ),
                            Expanded(
                              child: GestureDetector(
                                child: ListView.builder(
                                  padding: EdgeInsets.symmetric(vertical: 20.r),
                                  shrinkWrap:
                                      true, //解决无线高度问题 解决SingleChildScrollView 和listview冲突问题 ListView.builder
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return pointListItem1(
                                        state.macroscopic1[index]);
                                  },
                                  // 禁止滑动
                                  physics: const NeverScrollableScrollPhysics(),
                                  //item固定高度
                                  // itemExtent: ScreenUtil().setHeight(30),
                                  // 滑动方向
                                  scrollDirection: Axis.vertical,
                                  itemCount: state.news.length,
                                ),
                                onTap: () {
                                  Get.to(const KeyPointBigPage());
                                },
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              padding: EdgeInsets.only(left: 10.r, right: 10.r),
                              width: 50.r,
                              child: const Icon(
                                Icons.arrow_forward_ios,
                                size: 18,
                              ),
                            ),
                          ],
                        ),
                        Divider(
                          color: TopColors.gray_line,
                          height: 1,
                        ),
                        Row(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(
                                left: 10.r,
                              ),
                              padding: EdgeInsets.only(
                                  left: 10.r,
                                  top: 10.r,
                                  right: 10.r,
                                  bottom: 10.r),
                              width: 50.r,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(5.r),
                              ),
                              child: const Text(
                                "微观问题",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 15),
                              ),
                            ),
                            Expanded(
                              child: GestureDetector(
                                child:
                                    pointListItem2(state.microcosmic1, false),
                                onTap: () {
                                  Get.to(const KeyPointSmallPage());
                                },
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              padding: EdgeInsets.only(left: 10.r, right: 10.r),
                              width: 50.r,
                              child: const Icon(
                                Icons.arrow_forward_ios,
                                size: 18,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<KeyPointLogic>();
    super.dispose();
  }

  /// 最新动态
  Widget pointListItem(String news) {
    return Container(
      margin: EdgeInsets.only(left: 5.r, top: 2.r, bottom: 2.r),
      child: Row(
        children: [
          const Icon(
            Icons.check_circle,
            color: Colors.green,
            size: 18,
          ),
          SizedBox(
            width: 5.r,
          ),
          Flexible(
            child: Text(
              news,
              style: TextStyle(color: TopColors.black_33, fontSize: 13),
              maxLines: 2,
              softWrap: true,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }

  /// 宏观问题
  Widget pointListItem1(String macroscopic) {
    return Container(
      margin: EdgeInsets.only(left: 5.r, top: 2.r, bottom: 2.r),
      child: Row(
        children: [
          const Icon(
            Icons.error,
            color: Colors.orange,
            size: 18,
          ),
          SizedBox(
            width: 5.r,
          ),
          Text(
            macroscopic,
            style: const TextStyle(color: Colors.orange, fontSize: 14),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }

  /// 微观问题
  Widget pointListItem2(List microcosmic, bool show) {
    return Container(
      margin: EdgeInsets.only(left: 5.r, top: 10.r, bottom: 10.r),
      padding: EdgeInsets.only(top: 5.r, bottom: 5.r),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Row(
            children: [
              Text(
                microcosmic[0],
                style: TextStyle(color: TopColors.black_33, fontSize: 15),
              ),
              Visibility(
                visible: show,
                child: Container(
                  margin: EdgeInsets.only(left: 5.r),
                  decoration: BoxDecoration(
                    border: Border.all(color: TopColors.main_red, width: 1),
                    borderRadius: BorderRadius.circular(2.r),
                  ),
                  child: Text(
                    "我的包联企业",
                    style: TextStyle(color: TopColors.main_red, fontSize: 11),
                  ),
                ),
              )
            ],
          ),
          SizedBox(
            height: 10.r,
          ),
          Row(
            children: [
              const Icon(
                Icons.error,
                color: Colors.orange,
                size: 18,
              ),
              SizedBox(
                width: 5.r,
              ),
              Text(
                microcosmic[1],
                style: const TextStyle(color: Colors.orange, fontSize: 15),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ],
      ),
    );
  }
}
